import Controller from './Controller';
import GUI from './GUI';

export default class StringController extends Controller {

	constructor( parent, object, property, config ) {
		if(config == null) config = {} ;

		super( parent, object, property, 'string', 'div', config );
		let type = config.type ;
		if(type == null || type == "") type = "text" ;
		this.$input = document.createElement( 'input' );
		this.$input.setAttribute( 'type', type );
		this.$input.setAttribute( 'spellcheck', 'false' );
		this.$input.setAttribute( 'aria-labelledby', this.$name.id );
		if(type == "password") {
			this.$input.setAttribute( 'autocomplete', 'new-password' );
		}

		this.isEnter = false ;
		this.enterTrigger = false ;
		let keydownEvent = config.onKeydown ;
		let keyupEvent = config.onKeyup ;

		this.$input.addEventListener( 'input', () => {
			this.setValue( this.$input.value );
		} );

		this.$input.addEventListener( 'keydown', e => {
			if ( e.code === 'Enter' ) {
				this.isEnter = true ;
				if(this.enterTrigger == true) {
					this._changed = true;
					this._callOnFinishChange();
				}else
					this.$input.blur();
			}else {
				this.isEnter = false ;
			}
			if(GUI.onKeydown != null) GUI.onKeydown(e,this.$input,this) ;
			if(keydownEvent != null)
				keydownEvent(e,this.$input,this) ;
		} );

		this.$input.addEventListener( 'keyup', e => {
			if(GUI.onKeyup != null) GUI.onKeyup(e,this.$input,this) ;
			if(keyupEvent != null)
				keyupEvent(e,this.$input,this) ;
		} );

		this.$input.addEventListener( 'blur', () => {
			this._callOnFinishChange();
		} );

		this.$widget.appendChild( this.$input );

		this._appendEndDomHtml(config.endHtml) ;
		// let endHtml = config.endHtml ;
		// if(endHtml != null && endHtml != ""){
		// 	this.$span = document.createElement( 'span' );
		// 	this.$span.classList.add("lilInlineEndSpan") ;
		// 	this.$widget.appendChild( this.$span );
		//
		// 	this.$span.innerHTML = endHtml ;
		// }

		this.$disable = this.$input;

		this.updateDisplay();

	}

	/**
	 * 回车时，触发finish事件，并且不触发失去焦点行为，主要用于查询条件
	 * @returns {StringController}
	 */
	enterTriggerFinish(){
		this.enterTrigger = true ;
		return this ;
	}

	triggerValueChange(){
		this.setValue( this.$input.value );
		this._callOnFinishChange();
		return this ;
	}

	updateDisplay() {
		let value = this.getValue() ;
		if(value == null) value = '' ;
		this.$input.value = value ;
		return this;
	}

	placeholder(str) {
		if(str == null || str == "") return this ;
		this.$input.setAttribute("placeholder",str) ;
		this.tooltip(str) ;
		return this ;
	}

	setStyle(style){
		if(style == null) return this ;
		if(this.$input == null) return this;
		this.$input.setAttribute("style",style) ;
		return this ;
	}

	addClass(clazz){
		if(clazz == null || clazz == "") return this ;
		if(this.$input == null) return this;
		this.$input.classList.add(clazz) ;
		return this ;
	}

	removeClass(clazz){
		if(clazz == null || clazz == "") return this;
		if(this.$input == null) return this;
		this.$input.classList.remove(clazz) ;
		return this ;
	}
}
